<template>
  <div class="content">
      <p>热门分类</p>
      <ul>
          <li v-for="(v,i) in arr" :key="i" @click="fun(v)">
            <img :src="v.img">
            <i>{{v.name}}</i>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
      return{
        arr:[{img:"/type/1.gif",name:"蓝牙耳机",typeID:1},
        {img:"/type/2.gif",name:"蓝牙耳机",typeID:2},
        {img:"/type/3.gif",name:"蓝牙耳机",typeID:3},
        {img:"/type/4.gif",name:"蓝牙耳机",typeID:4},
        {img:"/type/5.gif",name:"蓝牙耳机",typeID:5},
        {img:"/type/6.gif",name:"蓝牙耳机",typeID:6},
        {img:"/type/7.gif",name:"蓝牙耳机",typeID:7},
        {img:"/type/8.gif",name:"蓝牙耳机",typeID:8},
        {img:"/type/9.gif",name:"蓝牙耳机",typeID:9},
        {img:"/type/10.gif",name:"蓝牙耳机",typeID:10},
        {img:"/type/11.gif",name:"蓝牙耳机",typeID:11},
        {img:"/type/12.gif",name:"蓝牙耳机",typeID:12},
        {img:"/type/13.gif",name:"蓝牙耳机",typeID:13},
        {img:"/type/14.gif",name:"蓝牙耳机",typeID:14},
        {img:"/type/15.gif",name:"蓝牙耳机",typeID:15},
        {img:"/type/16.gif",name:"蓝牙耳机",typeID:16},
        {img:"/type/17.gif",name:"蓝牙耳机",typeID:17},
        {img:"/type/18.gif",name:"蓝牙耳机",typeID:18},]
      }
    },
    methods: {
      fun(v){
        this.$router.push({path:'/goodslist',query:{typeID:v.typeID}});
      }
    },
}
</script>

<style scoped>
  .content{
    display: flex;
    flex: 1;
    flex-direction:column;
        overflow: scroll;
  }
  p{
    margin-top:0.1rem;
    font-size:0.18rem;
    font-weight: bold;
  }
  ul{
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  li i{
    color:#5c5c5c;
    font-size: 0.15rem;
    margin-top:0.05rem;
  }
</style>